<template>
    <div class="videos-container">
        <div class="top-container">
            <NavHeader>
                <template v-slot:mid>
                    <span>猫眼电影</span>
                </template>
                <template v-slot:right>
                    <span class="iconfont icon-caidan" @click="listToogle"></span>
                </template>
            </NavHeader>
            <OpenApp></OpenApp>
            <TopBar :categoryList="categoryList"></TopBar>
        </div>
        <VideoItem />
        <TabBar :tabList="tabList"></TabBar>
    </div>
</template>

<script setup name="Videos">
import { ref } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import TabBar from "components/common/TabBar/index.vue";
import NavHeader from "components/common/NavHeader/index.vue";
import OpenApp from "components/common/OpenApp/index.vue";
import TopBar from "components/common/TopBar/index.vue";
import VideoItem from "components/VideoItem/index.vue";
import { getVideosList } from "network/Videos/index";

const tabList = ref([
    {
        id: "1",
        path: "/",
        name: "电影/影视",
        icon: "icon-dianying",
    },
    {
        id: "2",
        path: "/videos",
        name: "视频",
        icon: "icon-shipin1",
    },
    {
        id: "3",
        path: "/shortvideos",
        name: "小视频",
        icon: "icon-shipin",
    },
    {
        id: "4",
        path: "/show",
        name: "演出",
        icon: "icon-yanchu",
    },
    {
        id: "5",
        path: "/profile",
        name: "我的",
        icon: "icon-wode",
    },
]);
const categoryList = ref([
    {
        id: 1,
        name: "武汉",
        path: "/adress",
        icon: "iconfont icon-jiantou-tianchong",
    },
    {
        id: 2,
        name: "热映",
        path: "/hot",
        icon: "",
    },
    {
        id: 3,
        name: "影院",
        path: "/cinema",
        icon: "",
    },
    {
        id: 4,
        name: "待映",
        path: "/shown",
        icon: "",
    },
    {
        id: 5,
        name: "经典电影",
        path: "/classic",
        icon: "",
    },
    {
        id: 6,
        name: "",
        path: "/search",
        icon: "",
    },
]);

const feedsList = ref([]);
onMounted(async () => {
    const {
        data: { feeds },
    } = await getVideosList({
        uuid: "31664A10D59611EBB56903E608E4C68C1F4880C3FA3A47D1A9F66872ED3C2344",
        channelId: 4,
        feedChannelId: 0,
        timestamp: 1625294881986,
        offset: 15,
    });
    feedsList.value = [...feeds];
    console.log(feedsList);
});
</script>

<style lang="less" scoped>
.nav-header {
    span {
        color: white;
    }
}
</style>
